<template>
  <section class="one-stop-solution">
    <h2 class="section-title">一站式解决身心健康问题</h2>
    <p class="section-subtitle">以数据驱动，从根源改善，助力实现可持续的健康提升</p>
    <div class="solution-graph">
      <img
        clas="section-icon"
        src="https://images.health.ufutx.com/202506/17/9f4bcbe591f96658e08151466cd5b932.png"
        alt=""
      />
    </div>
  </section>
</template>

<script setup lang="ts">
// 无额外逻辑，纯展示
</script>

<style scoped lang="less">
.one-stop-solution {
  padding: 50px 20px 0 20px;
  text-align: center;
  background: radial-gradient(83.44% 50% at 50% 50%, #fff 0%, #e8f0ff 100%);
  .mt(20px);
}
.section-title {
  font-size: @font-size-xxl;
  color: @text-color;
  font-weight: bold;
}
.section-subtitle {
  font-size: 20px;
  color: @text-color-secondary;
  .mt(20px);
}
.solution-graph {
  .mt(50px);
  //position: relative;
  //width: 300px;
  //height: 300px;
  //margin: 0 auto;
}
.core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: #409eff;
  border-radius: 50%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ring {
  position: absolute;
  width: 120px;
  height: 120px;
  border: 2px dashed #409eff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #409eff;
}
/* 调整环形位置 */
.ring:nth-child(2) {
  top: 20px;
  left: 90px;
}
.ring:nth-child(3) {
  top: 180px;
  left: 90px;
}
.ring:nth-child(4) {
  top: 90px;
  left: 20px;
}
.ring:nth-child(5) {
  top: 90px;
  right: 20px;
}
.stats {
  margin-top: 40px;
  font-size: 14px;
  color: #666;
}
</style>
